<template>
	<div class="project-page">
		<div class="project-page-search">
			<el-input
				class="search-input ml-10"
				v-model="searchData.projectName"
				placeholder="请输入项目名">
			</el-input>
			<el-date-picker
				class="search-input ml-10"
				v-model="searchData.beginTime"
				type="date"
				:editable="false"
				format="yyyy 年 MM 月 dd 日"
				value-format="yyyy-MM-dd"
				placeholder="请选择开始日期">
			</el-date-picker>
			<el-date-picker
				class="search-input ml-10"
				v-model="searchData.endTime"
				type="date"
				:editable="false"
				format="yyyy 年 MM 月 dd 日"
				value-format="yyyy-MM-dd"
				placeholder="请选择结束日期">
			</el-date-picker>
			<el-select
				class="search-input ml-10"
				v-model="searchData.state"
				placeholder="请选择状态"
				clearable
				filterable>
				<el-option label="挂起" value="挂起"></el-option>
				<el-option label="正常" value="正常"></el-option>
			</el-select>
			<SearchOrReset @reset="resetSearch" @getTableData="getTableData"></SearchOrReset>
		</div>
		<div class="project-page-funcBtns">
			<el-button class="funcBtns-add mt-10 ml-10" type="primary" @click="openPointsDialog"
				>新增</el-button
			>
		</div>
		<div class="project-page-dataTable mt-10 ml-10">
			<PublicTable :tableData="tableData" :tableHeader="columnObj">
				<template #controls="{row,index}">
					<EditOrDel @edit="edit(row)" @del="del(row.id)"></EditOrDel>
				</template>
			</PublicTable>
		</div>
		<div class="project-page-paging mt-10">
			<el-pagination
				:page-sizes="[5, 10, 15, 20]"
				layout="total, sizes, prev, pager, next, jumper"
				:current-page="pageNum"
				:page-size="pageSize"
				:total="total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</div>
		<el-dialog
			class="projectsDialog"
			:title="dialogTitle"
			:visible.sync="projectsDialogVisible"
			width="30%">
			<el-form ref="form" :rules="rules" :model="form" label-width="25%">
				<el-form-item prop="projectName" label="项目名：">
					<el-input v-model="form.projectName" placeholder="请输入项目名"> </el-input>
				</el-form-item>
				<el-form-item prop="projectPeople" label="负责人：">
					<el-input v-model="form.projectPeople" placeholder="请输入负责人"> </el-input>
				</el-form-item>
				<el-form-item prop="beginTime" label="开始日期：">
					<el-date-picker
						v-model="form.beginTime"
						type="date"
						:editable="false"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
						placeholder="请选择开始日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="endTime" label="结束日期：">
					<el-date-picker
						v-model="form.endTime"
						type="date"
						:editable="false"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
						placeholder="请选择结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item prop="state" label="项目状态：">
					<el-select v-model="form.state" placeholder="请选择状态" clearable filterable>
						<el-option label="挂起" value="挂起"></el-option>
						<el-option label="正常" value="正常"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="img" label="项目介绍：">
					<el-upload
						accept="image/jpg,image/jpeg,image/png"
						:multiple="false"
						ref="imgUpload"
						:show-file-list="showFileList"
						:action="action"
						:on-success="successUpload"
						:before-upload="beforeAvatarUpload"
						:before-remove="beforeRemove">
						<el-image
							v-if="dialogTitle == '修改项目'"
							class="projectImg"
							:src="imgUrl + form.img">
						</el-image>
						<el-button v-else size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button @click="closePointsDialog">取消</el-button>
				<el-button type="primary" @click="save">确定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { getBaseData, saveData, deleteDataS } from "@/api/Common";
import SearchOrReset from '@/components/Buttons/SearchOrReset.vue'
import PublicTable from "@/components/Tables/PublicTable.vue";
import EditOrDel from "../../components/Buttons/EditOrDel.vue";
export default {
	name: "ProjectMaintenance",
	components: {
    SearchOrReset,
    SearchOrReset,
    PublicTable,
    PublicTable,
    EditOrDel
},
	data() {
		return {
			pageNum: 1,
			pageSize: 5,
			total: 5,
			dialogTitle: "",
			tableData: [], //数据
			columnObj: [], //表格头
			form: {},
			rules: {
				projectName: [{ required: true, message: "请输入项目名", trigger: "blur" }],
				projectPeople: [{ required: true, message: "请输入负责人", trigger: "blur" }],
				beginTime: [
					{
						type: "string",
						required: true,
						message: "请选择开始日期",
						trigger: "change",
					},
				],
				endTime: [
					{
						type: "string",
						required: true,
						message: "请选择结束日期",
						trigger: "change",
					},
				],
				state: [{ required: true, message: "请输入状态", trigger: "blur" }],
			},
			batchDeletion: [],
			searchData: {
				//搜索框数据
				projectName: "",
				beginTime: "",
				endTime: "",
				state: "",
			},
			projectsDialogVisible: false,
			action: "http://localhost:8055/skills/files/upload",
			imgUrl: "http://localhost:8055/skills/files/",
			imgUUID: "",
			showFileList: true,
		};
	},

	created() {
		this.getTableData();
	},

	methods: {
		// 获取数据
		getTableData() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				projectName: this.searchData.projectName,
				beginTime: this.searchData.beginTime,
				endTime: this.searchData.endTime,
				state: this.searchData.state,
			};
			getBaseData("/projectMaintenance/search", params)
				.then((res) => {
					console.log(res);
					this.tableData = res.data.list;
					this.total = res.data.total;
					this.setTableColumn()
				})
				.catch((err) => {
					console.log(err);
				});
		},
		//设置表格列所需的数据
		setTableColumn() {
			//按照所需数据格式设置表格列
			
			let tableData = this.tableData.map((item) => {								
				let { id, projectName, projectPeople, beginTime, endTime, state } = item
				return { id, projectName, projectPeople, beginTime, endTime, state }
			})
			//设置所需数据所需的键
			let columns = tableData[0]
			console.log('columns', columns);
			//设置表格列的label
			const labelValues = ['编号','项目名','负责人','开始日期','结束日期','项目状态']
			// 生成一个新的数组，含有以下配置项
			let propArray = Object.keys(columns).map((key, index) => {
				return{
					prop:`${key}`,
					label:labelValues[index],
					align: 'center',
					width: '',
					text:true
				}
			})
			propArray[0].width = '50'
			//添加操作列
			propArray.push({
				prop: '',
				label: '操作',
				align: 'center',
				slot:'controls'
			})
			this.columnObj = propArray
		},
		//每页显示的条目数变化
		handleSizeChange(pageSize) {
			this.pageSize = pageSize;
			this.getTableData();
		},
		//当前页数变化
		handleCurrentChange(pageNum) {
			this.pageNum = pageNum;
			this.getTableData();
		},
		//重置搜索框
		resetSearch() {
			for (let key in this.searchData) {
				if (this.searchData.hasOwnProperty(key)) {
					this.searchData[key] = "";
				}
			}
			console.log(this.searchData);
			this.getTableData();
		},
		// 打开弹窗
		openPointsDialog() {
			this.dialogTitle = "添加项目";
			this.projectsDialogVisible = true;
			this.showFileList = true;
			this.form = {};
		},
		// 关闭弹窗
		closePointsDialog() {
			this.projectsDialogVisible = false;
			this.form = {};
			this.getTableData();
		},
		// 确认添加 保存
		save() {
			if (
				(this.form.projectName != "") &
				(this.form.projectPeople != "") &
				(this.form.beginTime != "") &
				(this.form.endTime != "") &
				(this.form.state != "")
			) {
				saveData("/projectMaintenance/addOrUpdateInfo", this.form)
					.then((res) => {
						console.log(res);
						if (res.code === "200") {
							this.$message.success("保存成功！");
							this.closePointsDialog();
							this.getTableData();
						} else {
							this.$message.error("保存失败！");
						}
					})
					.catch((err) => {
						console.log(err);
					});
			} else {
				this.$message.warning("请填写完整！");
			}
		},
		// 修改
		edit(val) {
			console.log(val);
			this.dialogTitle = "修改项目";
			this.projectsDialogVisible = true;
			this.showFileList = false;
			this.form = val;
		},
		// 删除
		del(id) {
			// console.log(id);
			deleteDataS("/projectMaintenance/deleteInfo/" + id)
				.then((res) => {
					console.log(res);
					if (res.code === "200") {
						this.$message.success("删除成功！");
						this.getTableData();
					} else {
						this.$message.error("删除失败！");
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
		selectDel(val) {
			this.batchDeletion = val;
		},
		// 限制上传类型
		beforeAvatarUpload(file) {
			const isJPG = file.type === "image/jpeg";
			const isPNG = file.type === "image/png";
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG && !isPNG) {
				this.$message.error("上传图片只能是 JPG或PNG 格式!");
			}
			if (!isLt2M) {
				this.$message.error("图片大小不能超过2MB！");
			}
			return (isLt2M && isJPG) || isPNG;
		},
		// 成功上传后的回调
		successUpload(res, file) {
			this.form.img = res.data;
		},
		// 移除图片
		beforeRemove(file, fileList) {
			// console.log(file,fileList);
			fileList.splice(-1, 1);
			this.form.img = "";
			console.log(this.form);
		},
	},
};
</script>

<style lang="scss" scoped>
.project-page {
	.project-page-search {
		display: flex;
		align-items: center;
		.search-input {
			width: 200px;
		}

		.search-button {}

		.reset-button {}
	}

	.project-page-funcBtns {
		.funcBtns-add {}
	}

	.project-page-dataTable {}

	.project-page-paging {
		text-align: center;
	}

	.pointsDialog {
		span {}
	}
}
</style>
